<script lang="ts" setup>
import { RouterLink } from 'vue-router';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },

  moreText: {
    type: String,
    default: '',
  },

  moreLink: {
    type: String,
    default: '',
  },
})
</script>

<template>
  <div class="rounded-4 bg-white p-20 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <div class="flex-y-center justify-between border-b-1 border-hex-f7f7f7">
      <h3 class="border-b-2 border-hex-3D7CFA pb-8 text-left text-16px color-hex-292929 font-500 leading-22">{{ props.title }}</h3>
      <RouterLink v-if="props.moreText" :to="props.moreLink" class="flex-y-center pb-10 text-14 color-hex-8b8b8b font-400">
        <div>{{ props.moreText }}</div>
        <div class="i-icons:arrow-right-1 ml-4 size-16"></div>
      </RouterLink>
    </div>

    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
</style>
